import 'package:flutter/material.dart';

import 'package:my_first_app/utils/app_logger.dart';
import 'package:my_first_app/components/component_theme.dart';
import 'component_area1.dart';
import 'component_area2.dart';

final logger = AppLogger();

class ViewPage extends StatefulWidget {
  const ViewPage({super.key});
  @override
  State<ViewPage> createState() => ComponentMain();
}

class ComponentMain extends State<ViewPage> {
  int _currentIndex = 0;
  bool _isMyPanelExpanded = false;

  final PageController _pageController = PageController();

  void _onItemTapped(int index) {

    if (index == 2) {
      // 点击 “用户相关”
      logger.info("点击了“用户相关”");
      setState(() {
        _currentIndex = index;
        _isMyPanelExpanded = true;
      });
    } else {
      // 点击 '信息速览', '推荐信息'
      if (index == 1) {
        logger.info("点击了“信息速览”");
      } else {
        logger.info("点击了“推荐信息”");
      }
      setState(() {
        _isMyPanelExpanded = false;
        _currentIndex = index;
      });
      _pageController.animateToPage(
        index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_currentIndex == 2 ? '用户相关' : ['信息速览', '推荐信息'][_currentIndex]),
      ),
      body: Stack(
        children: [
          // 主内容区域
          AnimatedOpacity(
            opacity: _isMyPanelExpanded ? 0.5 : 1.0,
            duration: const Duration(milliseconds: 300),
            child: Container(
              color: Colors.grey[100],
              child: PageView(
                controller: _pageController,
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  const Center(child: ComponentArea1()),
                  const Center(child: ComponentArea2()),
                  const Center(child: Text('AREA 3')),
                ],
              ),
            ),
          ),

          // 右侧滑出的“用户相关”面板
        AnimatedPositioned(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          left: _isMyPanelExpanded ? MediaQuery.of(context).size.width * 0.25 : MediaQuery.of(context).size.width,
          top: 0,
          bottom: 0,
          width: MediaQuery.of(context).size.width * 0.75,
          child: GestureDetector(
            child: Container(
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Text(
                      '用户相关设置',
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 20),
                    ComponentTheme(),
                  ],
                ),

            ),
          ),
        ),

        ],
      ),

      // 下方选择导航区域
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.thumb_up), label: '信息速览'),
          BottomNavigationBarItem(icon: Icon(Icons.whatshot), label: '推荐信息'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '用户相关'),
        ],
      )


    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}